{% extends "comics/base.html" %}
{%block extra%}
<link href="/site-media/jquery.css" rel="stylesheet" type="text/css" media="screen">
<!--script type="text/javascript" src="/site-media/jquery.min.js"></script-->
<!--script type="text/javascript" src="/site-media/jquery.galleria.js"></script-->
{% include "comics/gallery_code.html" %}
	<style media="screen,projection" type="text/css">
	
	/* BEGIN DEMO STYLE */
	{margin:0;padding:0}
	body{padding:20px;background:white;text-align:center;background:black;color:#bba;font:80%/140% georgia,serif;}
	h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	a{color:#348;text-decoration:none;outline:none;}
	a:hover{color:#67a;}
	.caption{font-style:italic;color:#887;}
	.demo{position:relative;margin-top:2em;}
	.gallery_demo{width:702px;margin:0 auto;}
	.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
	.gallery_demo li div{left:240px}
	.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	
	#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
	#main_image img{margin-bottom:10px;}
	
	.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	
	.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
	.info p{margin-top:1.6em;}
	
    </style>
{%endblock%}
{%block center%}
<div id="centerdoc">
<p><a href="{{series.get_absolute_url}}">{{name}}</a></p>
<p><a href="{{issue.get_absolute_url}}">{{ish_name}}</a></p>
<div id="scroller" style="width:700px; height:110px;">
		<div id="images" style="height:90px; white-space:nowrap;">
<ul id="mycarousel" class="jcarousel-skin-tango">
{% for page in pages%}
	<li> <img title="{{forloop.counter0}}" src="{{page.get_absolute_image_url}}"></li>
{%endfor%}
</ul>
</div>
		</div>
		</div>

		<br class='clearit' />
<div id="main_image_wrapper"><div id="main_image"></div></div>		
		<br class='clearit' />
	</div>
{%endblock%}